<template>
  <div class="bar-container">
    <div id="myChart" :style="{ width: '800px', height: '400px' }"></div>
  </div>
</template>

<script>
export default {
  name: 'Bar',
  data () {
    return {
      tagDoc: [],
      tag_number: [],
      tag_name: []
    }
  },
  methods: {
    async initTagsInfo () {
      const { data: res } = await this.$api.getHotTags()
      for (let i = 0; i < res.tagDoc.tags.length; i++) {
        const element = res.tagDoc.tags[i]
        this.tag_number[i] = parseInt(element.tag_number)
        this.tag_name[i] = element.tag_name
      }
      this.drawLine()
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '所有标签数据' },
        xAxis: {
          data: this.tag_name,
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          // 工具提示
          trigger: 'axis'
          // formatter: '{b} 的数量是 {c}'
          // formatter: function (arg) {
          //   // 文字格式化
          //   return arg[0].name + '的分数是:' + arg[0].data
          // }
        },
        toolbox: {
          feature: {
            saveAsImage: {}, // 导出图片
            dataView: {}, // 数据视图
            restore: {}, // 重置
            dataZoom: {}, // 区域缩放
            magicType: {
              type: ['bar', 'line']
            } // 动态图表类型的切换
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            data: this.tag_number,
            label: {
              // 柱状图上的文字设置
              show: true, // 是否显示
              position: 'top' // 显示位置
            },
            smooth: true, // 是否为平滑线
            areaStyle: { // 线和x轴形成的区域设置
              color: 'rgba(0, 0, 180, 0.4)'
            }
          }
        ]
      })
    }
  },
  created () {
    this.initTagsInfo()
  }
}
</script>

<style></style>
